<template>
	<view class="content">
		<navbar :isHome="true"></navbar>
		<view style="margin-top:130rpx">
			<view class="weui-cell">
				<view class="weui-cell__hd">
					<image src="../../static/images/ic_myapp.png"
						style="display: block;width: 40rpx;height: 40rpx;margin-right: 14rpx;"></image>
				</view>
				<view class="weui-cell__bd">
					<text style="font-size: 13px;color: #be9719;">
						点击右上角‘添加到我的小程序’,方便下次找到
					</text>
				</view>
				<view class="weui-cell__ft">
					<image src="../../static/images/modal_closer.png"
						style="display: block;width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
					:duration="500">
					<swiper-item v-for="(item,index) in slides">
						<image :src="item.pic_image_url" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="nav2-list">
				<view class="nav2-item" v-for="(item,index) in nav2s">
					<view class="nav2-pic" @click="toNav2(item)">
						<image :src="item.pic_image_url" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="nav-list">
				<view class="nav-item" v-for="(item,index) in navs">
					<view class="nav-pic" @click="toNav2(item)">
						<image :src="item.pic_image_url" mode=""></image>
					</view>
					<view class="nav-text">{{item.title}}</view>
				</view>
			</view>
			<view class="weui-cells hosp-list">
				<view class="weui-cells hosp-item weui-cell_access" v-for="(item,index) in hospitals">
					<view class="weui-cell__hd">
						<image class="hosp-avatar" :src="item.avatar_url" mode=""></image>
					</view>
					<view class="weui-cell__bd">
						<view>
							<text class="hosp-name">
								{{item.name}}
							</text>
						</view>
						<view class="hosp-line">
							<text class="hosp-rank">
								{{item.rank}}
							</text>
							<text class="hosp-label">
								{{item.label}}
							</text>
						</view>
						<view class="hosp-line">
							<text class="hosp-intro">
								{{item.intro}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const globalData = getApp().globalData
	const utils = globalData.utils
	let slides = ref([])
	let nav2s = ref([])
	let navs = ref([])
	let hospitals = ref([])
	const toNav2 = (item) => {
		if (item.stype == 1) {
			uni.navigateTo({
				url: item.stype_link
			})
		} else {}
	}
	onLoad(() => {
		globalData.utils.getuserInfo()
		utils.request({
			url: '/app/init',
			success: ({
				data
			}) => {
				const aid = data.area.id
				utils.request({
					url: "/Index/index",
					data: {aid},
					showLoading: true,
					success: ({
						data
					}) => {
						slides.value = data.slides
						nav2s.value = data.nav2s
						navs.value = data.navs
						hospitals.value = data.hospitals
					}
				})
			}
		})
	})
</script>

<style>
	.content {}

	.uni-margin-wrap {
		padding: 20rpx 20rpx 0 20rpx;
		overflow: hidden;
	}

	.uni-margin-wrap .swiper {
		height: 320rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.uni-margin-wrap .swiper image {
		height: 100%;
	}

	.nav2-list {
		margin: 10rpx 20rpx 0 20rpx;
	}

	.nav2-list::after {
		content: '';
		display: block;
		height: 0;
		line-height: 0;
		clear: both;
		visibility: hidden;
	}

	.nav2-item {
		float: left;
		margin-top: 20rpx;
		width: 50%;
		text-align: center;
		box-sizing: border-box;
		padding: 0 5rpx;
	}

	.nav2-pic {
		width: 100%;
	}

	.nav2-pic image {
		display: block;
		width: 100%;
	}

	.nav-list::after {
		content: '';
		display: block;
		height: 0;
		line-height: 0;
		clear: both;
		visibility: hidden;
	}

	.nav-item {
		float: left;
		margin-top: 20rpx;
		width: 20%;
		text-align: center;
		padding: 10rpx 0;
	}

	.nav-pic image {
		display: block;
		margin: 0 auto;
		width: 110rpx;
		height: 110rpx;
	}

	.nav-text {
		font-size: 24rpx;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
	}

	.hosp-list {
		margin: 10rpx 0 0 0;
		background: none;
	}

	.hosp-list::before {
		display: none;
	}

	.hosp-list::after {
		display: none;
	}

	.hosp-item {
		-webkit-box-align: stretch;
		-webkit-align-items: stretch;
		align-items: stretch;
		padding: 20rpx;
		margin: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		display: flex;
		box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);
	}

	.hosp-item::before {
		display: none;
	}

	.hosp-item::after {
		display: none;
	}

	.hosp-name {
		font-weight: bold;
		font-size: 34rpx;
	}

	.hosp-avatar {
		display: block;
		width: 200rpx;
		height: 180rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.hosp-line {
		margin-top: 5rpx;
	}

	.hosp-line text {
		font-size: 26rpx;
	}

	.hosp-rank {
		font-weight: bold;
		color: #0bb585;
		margin-right: 15rpx;
	}

	.hosp-label {
		font-weight: bold;
		color: #0ca7ae;
		margin-right: 15rpx;
	}

	.hosp-intro {
		color: #999999;
	}
</style>